.header {
  grid-column: full-start / col-end 6;
  background: linear-gradient(
      rgba($color-secondary, 0.93),
      rgba($color-secondary, 0.93)
    ),
    url("/img/hero.jpeg");
  background-size: cover;
  background-position: center;
  padding: 8rem;
  padding-top: 4rem;

  display: grid;
  grid-template-rows: 1fr min-content 6rem 1fr;
  grid-template-columns: max-content;
  justify-content: center;
  row-gap: 1.5rem;

  &__logo {
    height: 3rem;
    justify-self: center;
  }

  &__btn {
    justify-self: start;
    align-self: start;
  }

  &__seenon-text {
    display: grid;
    grid-template-columns: 1fr max-content 1fr;
    align-items: center;
    column-gap: 1.5rem;

    font-size: 1.6rem;
    color: $color-grey-light-2;

    &::before,
    &::after {
      content: "";
      height: 1px;
      display: block;
      background-color: currentColor;
    }
  }

  &__seenon-logs {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    column-gap: 3rem;
    justify-items: center;

    img {
      height: 2.5rem;
      filter: brightness(70%);
    }
  }
}
